<template>
  <div class="navbar">
    <Hamburger
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />

    <Breadcrumb class="breadcrumb-container" />
    <div class="back-farm" @click="goToHome">
      <i class="el-icon-upload2"></i>
      返回至农场
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger";
import { setToken } from "@/utils/auth";

export default {
  components: {
    Breadcrumb,
    Hamburger
  },
  computed: {
    ...mapGetters(["sidebar"])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    goToHome() {
      setToken("organizationName", '')
      this.$router.replace({ path: "/" });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.navbar {
  height: $hamburgerHeight;
  overflow: hidden;
  position: relative;
  background: $hamburgerBgColor;
  color: #fff;
  margin-bottom: $hamburgerToHeaderHeight;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .back-farm {
    position: absolute;
    right: 10px;
    bottom: $hamburgerHeight/4;
    cursor: pointer;
    i {
      transform: rotate(-90deg);
    }
  }
  .hamburger-container {
    line-height: $hamburgerHeight;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    color: #fff;
    ::v-deep .hamburger {
      background-color: #fff;
    }
    &:hover {
      background-color: #fff;
    }
  }

  .breadcrumb-container {
    float: left;
  }
}
</style>
